<template>
	<view class="content">
		<view class="top_banner">
			<img class="image" :src="data.top_banner"/>
			<view class="seller_info">
				<view class="relative">
					<view class="logo"><img :src="data.seller_logo"/></view>
					<b class="follow_num"><i class="coolc icon-xin"></i><span>{{data.follow}}收藏</span></b>
				</view>
			</view>
		</view>
		
		<view class="tab-bar">
			<view id="tab-bar" class="swiper-tab">
				<view @click="tapTab(0)" :class="['swiper-tab-list',tabIndex == 0 ? 'active' : '']">店铺首页</view>
				<view @click="tapTab(1)" :class="['swiper-tab-list',tabIndex == 1 ? 'active' : '']">全部商品</view>
				<view @click="tapTab(2)" :class="['swiper-tab-list',tabIndex == 2 ? 'active' : '']">活动商品</view>
				<view @click="tapTab(3)" :class="['swiper-tab-list',tabIndex == 3 ? 'active' : '']">新品上市</view>
			</view>
			<view :class="['infolist',tabIndex == 0 ? 'block' : '']">
				<view class="tj_title"><i class="coolc icon-remen"></i><span>热销推荐</span></view>
				<scroll-view scroll-x class="h-list">
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por5.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por6.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por5.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por6.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
				</scroll-view>
				<view class="tj_title" style="height:90upx; background:#ffffff; border-bottom:1px solid #eeeeee;"><i class="coolc icon-collection2"></i><span>店长推荐</span></view>
				<goods-Case v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-Case>
			</view>
			<view :class="['infogoods',tabIndex == 1 ? 'block' : '']">
				<goods-Case v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-Case>
			</view>
			<view :class="['infolist',tabIndex == 2 ? 'block' : '']">
				2222
			</view>
			<view :class="['infolist',tabIndex == 3 ? 'block' : '']">
				3333
			</view>
		</view>
		
		<!-- 顶部右侧菜单 -->
		<view v-bind:class="['navBarButtonBox',navBarButton ? '' : 'vb','']">
			<view class="h_newlit" v-bind:class="[navBarButton ? 'active' : '','']">
				<view class="em">
					<view class="livs">
						<i class="coolc icon-zhuye"></i> <span>首页</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shangjialiebiaoicon"></i> <span>品牌列表</span>
					</view>
					<view class="livs">
						<i class="coolc icon-fenlei"></i> <span>商品分类</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shipin"></i> <span>视频导购</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部右侧菜单 -->
		
		<view :class="['seller_kefu',scrollTop > 500 ? 'seller_kefus' : '']"><img src="~@/static/img/icon/kefu.png"></view>
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 500 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
	</view>
</template>

<script>
	import goodsCase from '@/components/goods-case';
	export default {
		components: {
			goodsCase,
		},
		data() {
			return {
				data: {
					"top_banner":"/static/sller_top.jpg",
					"name": "香奈儿（Chanel）旗舰店",
					"seller_logo": "/static/baner_logo_2.jpg",
					"follow": "1555",
					"read": "0",
					"content":""
				},
				navBarButton:false,
				tabIndex: 0,
				scrollTop:0,
				goodsList: [{}, {}],
				
			}
		},
		onPageScroll(res){
			this.scrollTop = res.scrollTop;
		},
		onLoad(){
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			},300);
			
			uni.setNavigationBarTitle({
				title: this.data.name
			});
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navBarButton = !this.navBarButton; 
			}
			if (index === 1) {
				//分享
			}
		},
		// #endif
		methods:{
			async tapTab(index) {
				this.tabIndex = index;
			},
			onGotoTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			//链接跳转
			navTo(url){
				uni.reLaunch({  
					url
				})  
			}, 
			async loadData() {				
				//推荐产品
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList;
			}
		}
	}
</script>

<style lang="scss">
	page { height:calc(100%) - var(--window-bottom)!important; background:$bgcolor_white; }
	.infolist,.infogoods,.infocomment { display:none; text-align:left; }
	.block { display:block; }
	.top_banner { 
		width:100%; height:auto; display:table; position:relative;
		
		.image { width:100%; }
		.seller_info {
			width:100%; height:170upx; background:url('/static/img/bg/seller_top_bg.png') repeat-x; text-align:center; display:flex; justify-content:center; background-size:auto 100%; position:absolute; left:0px; bottom:0px; right:0px; 
			.logo {
				width:160upx; height:160upx; border-radius:160upx; overflow:hidden; text-align:center; display:flex; justify-content:center; position:absolute;	left:50%; top:0px; margin-left:-80upx; margin-top:-80upx; box-shadow:0px 0px 4px #ccc;
				img { widows:auto!important; height:160upx; }
			}
			.relative { width:100%; height:100%; }
			.follow_num { 
				width:auto!important; height:54upx; line-height:54upx; display:inline-block; border:1px solid #d9d9d9; padding:0 30upx 0 20upx; border-radius:50upx; margin:110upx auto 0 auto; font-weight:500;
				.coolc { margin-right:10upx; }
			}
		}
	}
	.tj_title { width:100%; height:80upx; background:#f4f4f4; padding:20upx 26upx 0 26upx;
		.coolc { display:block; float:left; font-size:$font-lg; color:#ef0043; padding-right:10upx; }
		span { display:block; float:left; font-size:$font-base; color:#333333; }
	}
	.h-list{
		white-space:nowrap; padding:0upx 0 20upx 26upx; background:#f4f4f4;
		
		.goods_user{ display:inline-block; width:260upx; height:auto; border:1px solid #eee; overflow:hidden; margin-right:20upx;  padding-bottom:18upx; background:#ffffff; }
		.goods_user img { width:260upx; height:260upx; }
		.goods_user .product-title { width:220upx; color:#666666; display:block; margin:0 auto; font-size:24upx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.goods_user .product-price { margin-top:0px; padding:0 20upx; color:$vui_bgcolor; }
	}
</style>